<template>
	<el-container style="height: 100vh; border: 1px solid #eee">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu router :default-openeds="['']">
				<!-- 默认展开 !-->
				<el-menu-item index="/home">后台总览</el-menu-item>
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-user"></i>后台用户管理</template>
					<el-menu-item index="/adminuser/edit">修改资料</el-menu-item>
					<el-menu-item index="/adminuser/listuser">用户列表</el-menu-item>
					<el-menu-item index="1-3">选项3</el-menu-item>
					<el-menu-item index="1-4">选项4</el-menu-item>
				</el-submenu>

				<el-submenu index="2">
					<template slot="title"><i class="el-icon-user"></i>前台用户管理</template>
					<el-menu-item index="1-1">选项1</el-menu-item>
					<el-menu-item index="1-2">选项2</el-menu-item>
					<el-menu-item index="1-3">选项3</el-menu-item>
					<el-menu-item index="1-4">选项4</el-menu-item>
				</el-submenu>

				<el-submenu index="3">
					<template slot="title"><i class="el-icon-document"></i>文章管理</template>
					<el-menu-item index="/article/list">文章列表</el-menu-item>
					<el-menu-item index="/article/edit">文章发布</el-menu-item>
				</el-submenu>

				<el-submenu index="4">
					<template slot="title"><i class="el-icon-folder-opened"></i>分类管理</template>
					<el-menu-item index="/classify/list">分类列表</el-menu-item>
					<el-menu-item index="/classify/create">新建分类</el-menu-item>
				</el-submenu>

				<el-submenu index="5">
					<template slot="title"><i class="el-icon-setting"></i>权限管理</template>
					<el-menu-item index="4-1">选项1</el-menu-item>
					<el-menu-item index="4-2">选项2</el-menu-item>
					<el-menu-item index="4-3">选项3</el-menu-item>
				</el-submenu>
				<el-submenu index="6">
					<template slot="title"><i class="el-icon-s-management"></i>规则管理</template>
					<el-menu-item index="/rule/list">规则列表</el-menu-item>
					<el-menu-item index="4-2">选项2</el-menu-item>
					<el-menu-item index="4-3">选项3</el-menu-item>
				</el-submenu>

			</el-menu>
		</el-aside>

		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-menu :default-active="activeIndex" background-color="#545c64" active-text-color="#ffd04b" text-color="#fff"
				 router class="headermar el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="1">处理中心</el-menu-item>
					<el-submenu index="2">
						<template slot="title">我的工作台</template>
						<el-menu-item index="/adminuser/edit">资料修改</el-menu-item>
						<el-menu-item index="2-2">选项2</el-menu-item>
						<el-menu-item index="2-3">选项3</el-menu-item>
						<el-submenu index="2-4">
							<template slot="title">选项4</template>
							<el-menu-item index="2-4-1">选项1</el-menu-item>
							<el-menu-item index="2-4-2">选项2</el-menu-item>
							<el-menu-item index="2-4-3">选项3</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-menu-item index="3">消息中心</el-menu-item>
					<el-menu-item index="/search/search">搜索中心</el-menu-item>
					<i style="color: #FAECD8;">欢迎━(*｀∀´*)ノ</i><span style="color: aliceblue;" v-text="userinfo.username"></span>
					<el-button size="medium" type="danger" @click="exit()" round>退出登录</el-button>
				</el-menu>
			</el-header>
			<el-main>
				<div></div>
				<router-view></router-view>
			</el-main>

		</el-container>
	</el-container>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'Main',
		data() {
			return {
				activeIndex: '1',
			}
		},
		computed: {
			...mapState(['token', 'userinfo']),
		},
		methods: {
			handleSelect(key, keyPath) {
				this.activeIndex = keyPath[0];
				// console.log(key,keyPath);
			},
			setRouter(path) {
				this.$router.push({
					path: path
				})
			},
			exit() {
				localStorage.clear();
				this.$http.post('/admin/loginout', {}, {
					headers: {
						'Authorization': 'Bearer ' + this.token
					}
				}).then((res) => {
					// console.log(res)
					this.$notify({
						title: res.data.notice,
						message: '庆祝我们建立的史诗!',
						type: 'success'
					});
				}).catch((err) => {
					console.log(err)
				});
				this.$router.push('/Login')
			}
		}
	}
</script>

<style scoped>
	.headermar {
		margin-left: -20px;
		margin-right: -20px;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
